体循环|可视_天地图之自定义标记点

篇首语：本文由编程笔记#小编为大家整理，主要介绍了天地图之自定义标记点相关的知识，希望对你有一定的参考价值。

需求&＃xff1a;在地图上标记监控点位&＃xff0c;地图引入的过程就不多啰嗦&＃xff0c;可参考此专栏前几篇文章&＃xff0c;下面直接介绍实现步骤

1.绘制标记点&＃xff08;如果多个点则需要放到循环体循环渲染&＃xff09;

点的坐标

var position &＃61; new T.LngLat(经度, 纬度)


点的图标样式

var icon &＃61; new T.Icon(
iconUrl: "图标路径", //请求图标图片的URL
iconSize: new T.Point(30, 30), //图标可视区域的大小。
iconAnchor: new T.Point(30, 30) //图标的定位锚点
);


点的文本标注

var label &＃61; new T.Label(
text: "文本内容", //文本标注的内容
position: position, //文本标注的地理位置
offset: new T.Point(-50, 20) //文本标注的位置偏移值
)


渲染到地图

var marker &＃61; new T.Marker(position,
icon: icon,
label: label
)
this.map.addOverLay(label);
this.map.addOverLay(marker);


该点无实际意义&＃xff0c;仅为演示

2.点击标记点

marker.addEventListener("click", (e) &＃61;>
console.log(e)
)